<template>
  <div class="question-item" @click="questionClick">
    <div class="question">{{ index + 1 }}. {{ item.question }}</div>
    <div class="answer">{{ item.answer }}</div>
    <div class="operate">
      <span
      class="el-icon-edit"
      title="编辑此问题"
      @click="editQA"
    ></span>
      <span
      class="el-icon-delete"
      title="删除此问题"
      @click="delQA"
    ></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "QuestionItem",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    index: Number,
  },
  methods: {
    questionClick() {
      // console.log(this.index)
    },
    editQA() {
      this.$messageBox.edit()
    },
    delQA() {
      this.$confirm("删除此问题，是否确定", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$toast.show("删除成功", "success", 1000);
        })
        .catch(() => {
          this.$toast.show("取消删除", "default", 1000);
        });
    },
  },
};
</script>

<style scoped>
.question-item {
  position: relative;
  width: 1000px;
  margin: 20px auto 0;
  padding: 15px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  font-size: 15px;
}

.question-item:hover {
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.question {
  font-weight: 700;
}

.answer {
  margin-top: 15px;
  line-height: 1.7;
}

.operate {
  position: absolute;
  top: 35px;
  right: 0;
}

.operate span {
  margin-right: 30px;
}

</style>
